<template>
	<hover-container class="w-40px h-full" tooltip-content="全屏" :inverted="themeStore.navTheme === 'dark'" @click="toggle">
		<icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-18px" />
		<icon-gridicons-fullscreen v-else class="text-18px" />
	</hover-container>
</template>

<script lang="ts" setup>
import { useThemeStore } from "@/store";
import { useFullscreen } from '@vueuse/core';

defineOptions({ name: 'FullScreen' });

const { isFullscreen, toggle } = useFullscreen();
const themeStore = useThemeStore();
</script>

<style scoped></style>
